<template>
  <div>
    
  <div class="search">
    <van-search
     shape="round"
     @search="Search"
     @input="change"
      v-model="value"
       placeholder="请输入搜索关键词"/>
  </div>
  <div class="list" v-if="songList.length == 0">
    <div class="hotList" v-if="!show">
      <div class="hotList-title">热门搜索</div>
      <div class="hotList-items">
        <div class="item" v-for="(item,index) in hot">{{ item.first }}</div>
      </div>
    </div>
<div v-for="(item,index) in hishory">
<span>{{ item }}</span>
<span @click="delHistory(index)">x</span>
</div>

    <div class="hotList" v-if="show">
      <div>搜索建议</div>
      <div v-for="(item,index) in jy">{{ item.keyword }}</div>
    </div>
  </div>
  <div class="hotList">
    <Music :list="songList" />
  </div>
</div>
</template>

<script>
import{getHotList,getjy,getSearch} from '../api/demo'
export default {
  data() {
    return {
      value: "",
      hot: [],
      show:false,
      jy:[],
      songList:[],
      hishory:[]
    };
  },
  created(){
    this.getList();
    let a1 = JSON.parse(localStorage.getItem('demo1'))
    if(a1){
      this.hishory = a1
    }
  },
  methods:{
delHistory(e){
  this.hishory.splice(e,1)
  localStorage.setItem('demo1',JSON.stringify(this.hishory))
},

    async Search(value){
this.hishory.unshift(this.value)
let arr1 = Array.from(new Set(this.hishory))
localStorage.setItem('demo1',JSON.stringify(arr1))
let a1 =JSON.parse(localStorage.getItem('demo1'))
if(a1){
  this.hishory = a1
}
let res = await getSearch(value)
this.songList = res.data.result.songs
console.log(res.data)
    },
    async jianyi(value){
      let res = await getjy(value)
      console.log(res.data)
      this.jy = res.data.result.allMatch;
    },
    async getList(){
      let res = await getHotList()
      console.log(res)
      this.hot = res.data.result.hots;
    },
  change(){
    this.show = true;
    if(this.value != ""){
      this.jianyi(this.value);
    }
    if(this.value == ""){
      this.show = false;
      this.songList = [];
    }
  }
  }
};
</script>

<style lang="less" scoped>
.list {
  padding: 10px;
  box-sizing: border-box;

  .hotList-items {
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-right: 15px;
      padding: 8px 10px;
      margin-top: 10px;
      border: 1px solid #adadad;
      border-radius: 20px;
    }
  }
}

.search {
  border-bottom: 1px solid #e8e8e8;
}

/deep/.van-search__content {
  background-color: #ebecec;
}
</style>

